<template>
	<!-- 孔德嘉 2023年3月22日 -->
	<view class="wrap" :style="{'--before-color': (sortValue !== 3?'#eb0045':'black')}">
		<view class="nav">
			<uni-nav-bar @clickLeft="back" left-icon="left" leftWidth="40rpx" height="40%">
				<!-- 搜索导航栏 -->
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" v-model="goodsName"  class="nav-bar-input" type="text" placeholder="寻找宝贝"
						@confirm="confirm" />
					
				</view>
				<block slot="right">
					<view class="button">
						<span class="label" @click="loadmore()">搜索</span>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<!-- 分栏 -->
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<!-- 选项1 拍品页面 -->
			<view v-if="current === 0">  
				<!-- 排序方式 -->
				<uni-row class="demo-uni-row" width="730">
					<uni-col :span="9" class="sort1">
						<view >
							<uni-data-select v-model="startPrice" class="select" :options="range" :localdata="range" @change="updateSelectedStyle" :clear="false"
								ref="dataSelect" placeholder="综合排序">
							</uni-data-select>
						</view>
					</uni-col>
					<uni-col :span="9">
						<view @click="clickSort(2)">
							<text class="sort2" :style="{color:(sortValue === 3?'#eb0045':'black')}">销量优先</text>
						</view>
					</uni-col>
					<uni-col :span="6">
						<view class="sort3 " @click="showPopup = true">
							<text>筛选</text>
							<uni-icons type="refreshempty" size="16"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
				<!-- 主要内容 -->
				<view class="u-page">
					<u-list @scrolltolower="scrolltolower">
						<u-list-item   v-for="(item, index) in indexList" :key="index">
							<u-cell>
								<u-avatar slot="icon" shape="square" size="240rpx" :src="item.imgId"
								@click="toxiangqing(item.id)"
									customStyle="margin: -3px 5px -3px 0;" class="listImg"></u-avatar>
								<view slot="title">
									<!-- 右侧文字部分 -->
									<!-- 拍品标题 -->
									<view style="height: 50rpx; width: 300rpx;display: inline-block;">
										<p style="width:300rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;
										-o-text-overflow:ellipsis;font-size: 1.2rem;font-weight: 400;line-height: 1.05rem;">
											拍品名称{{item.goodsName}} 
										</p>
									</view>
									<!-- 拍品地址 -->
									<view
										style="height: 35rpx; width: 350rpx;display: inline-block;margin-bottom: 40rpx;">
										<p style="color: #9b9b9b;font-size: 1.0rem;">地址{{index}}</p>
									</view>
									<!-- 当前价格-->
									<view style="height: 60rpx; width: 436rpx;display: inline-block;font-size: 0.8rem;">
										<p style="color: #eb0045; float: left;height: 60rpx;line-height: 60rpx;">当前<span
												style="font-size: 1.4rem;font-weight: 500;">价格：{{item.startPrice}}</span>
										</p>
										<p style="float:right;height: 60rpx;line-height: 80rpx;">围观123{{index}}人次</p>
									</view>
									<!-- 结束时间-->
									<view style="height: 30rpx; width: 500rpx;display: inline-block;font-size: 0.8rem;">
										<p>预计3月21日19:3{{item.endTime}}结束</p>
									</view>
								</view>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</view>
			<!-- 选项2  用户模块 -->
			<view v-if="current === 1">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in indexLists" :key="index" style="padding: 12.6rpx 0;">
						<u-cell>
							<u-avatar slot="icon" shape="circle" size="80rpx" :src="item.imageId"
								customStyle="margin: -3px 5px -3px 0;" class="listImg"></u-avatar>
							<view slot="title">
								<!-- 右侧文字部分 -->
								<!-- 用户名标题 -->
								<view style="height: 40rpx; width: 300rpx;display: inline-block;">
									<p style="width:300rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;
									-o-text-overflow:ellipsis;font-size: 1.0rem;font-weight: 400;line-height:  40rpx;">
										用户名 {{item.userName}}
									</p>
								</view>
								<!-- 当前价格-->
								<view style="height: 30rpx; width: 436rpx;display: inline-block;font-size: 0.8rem;">
									<p style="float:left;height: 30rpx;line-height: 30rpx;">{{index%2?'个人':'企业'}} |
										已拍：{{index}}次</p>
								</view>

							</view>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<view>
			<u-popup :show="showPopup" @close="closePopup" @open="openPopup" mode="right">
				<view>
					<text>出淤泥而不染，濯清涟而不妖</text>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				startPrice:'',
				userName:'',
				userId: '',
				goodsName: '',
				showPopup: false, //筛选弹出层默认 关闭
				value: '', //搜索内容
				//分段器 默认第一个
				current: 0,
				//分段器 颜色
				activeColor: 'rgb(235, 0, 69)',
				//分栏名称neg
				items: ['拍品', '用户'],
				//分栏器样式
				styleType: 'text',
				//默认选项
				sortValue: 0,
				// 下拉列表选项
				range: [{
						
						value: 0,
						text: "综合排序"
					},
					{
						value: 1,
						text: "价格由高到低"
					},
					{
						value: 2,
						text: "价格由低到高"
					},
				],
				indexList: [{
					imgId: '',
					goodName: '',
					startPrice: '',
					endTime: '',
					imgViewId: ''
				}],
				indexLists:[{
					imageId:'',
					userName:''
				}],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		//进入页面或许name值
		onLoad(op) {
			// this.search(op.goodName)
			this.goodsName = op.goodName  //前面页面带过来的goodName值                                          
			this.loadmore()
		},
		mounted(){
			this.userMo()
		},
		methods: {
			toxiangqing(id) { // 拍品详情
				uni.navigateTo({
					url: '/pages/paiMaiXiangQing/paiMaiXiangQing?id=' + id,
				})
			},
			back() {
				uni.navigateBack({
					data: 1
				})
			},
			loadmore() { // 前端搜索框查询搜索框模糊查询
				// TODO: 加载数据
				// 组装请求参数
				const params = {
					goodsName: this.goodsName,  // 后台带过来的 goodsName this 到前端 goodsName里面
				};
				// 发送网络请求
				uni.request({
					url: 'http://localhost:8088/publish/publishMo',
					method: 'get',
					data: params,
				}).then(res => {
					this.indexList = res[1].data.obj
					this.indexList.forEach(a => {
						a.imgId = 'http://101.43.223.224:8765/image/getImageById?id=' + a.imgId.split(",")[0]
					})
					console.log(this.indexList)
				})
				
			},


			userMo() { // 查询用户
				// 发送网络请求
				uni.request({
					url: 'http://localhost:8088/clientuser/userMo',	
					method: 'get',
				}).then(res => {
					this.indexLists = res[1].data.obj
					this.indexLists.forEach(a => {
						a.imageId = 'http://101.43.223.224:8765/image/getImageById?id=' + a.imageId.split(",")[0]
					})
					console.log(this.indexLists)
				})
			},


			openPopup() {
				this.show = true
			},
			closePopup() {
				this.show = false
			},
	
			//切换点击下拉框选项
			updateSelectedStyle(sb) {  // 下拉框排序
				if(sb == 0){  // 判断 sb 是否=0
					this.loadmore()
				}else if(sb ==1){ //由高到低
				// TODO: 加载数据
				// 组装请求参数
				const params = {
					goodName: this.goodsName,
					startPrice:this.startPrice,
				};
						uni.request({
							url: 'http://localhost:8088/publish/clientPrice',	
							method: 'get',
							data: params,
						}).then(res => {
							this.indexList = res[1].data.obj
							this.indexList.forEach(a => {
								a.imgId = 'http://101.43.223.224:8765/image/getImageById?id=' + a.imgId.split(",")[0]
							})
							console.log(this.indexList)
						});
				}else if(sb==2){// 由低到高
					//改变排序
					//点击排序下拉框中的选项
					// TODO: 加载数据 
					// 组装请求参数
					const params = {
						goodName: this.goodsName,
						startPrice:this.startPrice,
					};
						uni.request({ // 根据 goodName 模糊查 然后再进行排序
							url: 'http://localhost:8088/publish/cientPrices',	
							method: 'get',
							data:params,
						}).then(res => {
							this.indexList = res[1].data.obj
							this.indexList.forEach(a => {
								a.imgId = 'http://101.43.223.224:8765/image/getImageById?id=' + a.imgId.split(",")[0]
							})
							console.log(this.indexList)
						})
				}
					
			},
			//点击分栏
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			
			//查看更多
			scrolltolower() {
				this.loadmore()
			},
			//查看更多
			// loadmore() {
			// 	for (let i = 0; i < 30; i++) {
			// 		this.indexList.push({
			// 			url: this.urls[uni.$u.random(0, this.urls.length - 1)]
			// 		})
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--before-color: #333;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.wrap {
		width: 100%;
		height: 100rpx;
	}

	.nav .uni-navbar__header-btns-left {
		width: 16px;
	}

	$nav-height: 40px;



	.nav .input-view {
		display: flex;
		// /* #endif */
		flex-direction: row;
		/* // width: 500rpx; */
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.nav .input-uni-icon {
		line-height: $nav-height;
	}

	.nav .nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		width: 370rpx;
		// /* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}

	.nav .button {
		display: inline-block;
		width: 5.2rem;
		color: #fff;
		font-size: .65rem;
		text-align: center;
		line-height: 2;
		border-radius: 10rem;
		background-image: linear-gradient(45deg, #ff2a68, #d7000f);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-right: 10px;
	}

	.nav .label {
		display: inline-block;
		width: 100%;
		letter-spacing: 2px;
	}

	.nav .example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 10px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
		padding-bottom: 10px;
		border-bottom-width: 0.5px;
		border-bottom-style: solid;
		border-bottom-color: #eee;
	}

	.uni-padding-wrap .content {
		// /* #ifndef APP-NVUE */
		display: flex;
		// #endif
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}

	.uni-padding-wrap .content-text {
		font-size: 14px;
		color: #666;
	}

	.uni-padding-wrap .color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-padding-wrap .uni-list {
		flex: 1;
	}

	.uni-padding-wrap .uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-padding-wrap .uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// border-bottom-style: solid;
		// border-bottom-width: 1px;
		// border-bottom-color: #eee;
	}

	.uni-padding-wrap .uni-list-item__content-title {
		font-size: 14px;
	}

	//分段器 改变字体大小粗细
	/deep/ .segmented-control__text {
		font-size: 18px;
		font-weight: 700;
	}

	//导航栏 去除边框
	/deep/ .uni-navbar--border {
		border-bottom-width: 0;
	}


	.content .demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.content.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.content.dark_deep {
		background-color: #99a9bf;
	}

	.content .example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}

	// 下拉框
	.demo-uni-row .text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.demo-uni-row .uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.demo-uni-row .uni-pb-5 {
		padding-bottom: 10px;
	}

	/deep/ .uni-select {
		border: none;
		height: 44px;
	}

	/deep/ .uni-select__input-box {
		margin-left: 32%;
	}

	/deep/ .uni-select__input-text {
		width: auto;
		margin-right: 18rpx;
		color: var(--before-color);
		font-weight: 400;
		font-size: 1.0rem;
	}

	/deep/ .uniui-bottom:before {
		content: '\25BC';
		color: var(--before-color);
		font-size: 10px;
		line-height: 44px;
	}

	/deep/ .uniui-top:before {
		content: "\25B2";
		color: var(--before-color);
		font-size: 10px;
		line-height: 44px;
	}

	.sort2 {
		font-weight: 400;
		font-size: 1.0rem;
		line-height: 44px;
		text-align: center;
		width: 100%;
		display: inline-block;
	}

	.sort3 {
		border-left: 1rpx solid #ddd;
		font-weight: 400;
		font-size: 1.0rem;
		line-height: 44px;
		text-align: center;
		width: 100%;
		display: inline-block;
	}

	/deep/ .sort3 .uni-icons {
		margin-left: 4px;
		line-height: 30px;
	}

	/deep/ .listImg .u-avatar__image--square {
		border-radius: 1px;
	}

	//选择框
	/deep/ .sort1 .uni-popper__arrow {
		border: none;
	}

	/deep/ .sort1 .uni-popper__arrow::after {
		border: none;
	}

	/deep/ .sort1 .uni-select__selector {
		box-shadow: none;
		border: none;
		width: 100rem;
		top: calc(100% + 8px);
	}

	.active {
		background-color: #d7000f;
	}

	/* 修改选中选项的颜色 */
	/deep/ .uni-data-select__item--selected {
		color: #eb0045;
	}
</style>
